<script setup lang="ts">
import ApiCoupon from '@/api/coupon';
import useDialog from '@/hooks/useDialog';
import useEnum from '@/hooks/useEnum';
import { ProTableScope, ProTableUltra } from '@/modules/package/table';
import { Plus } from '@element-plus/icons-vue';
import { ElButton, ElCard, ElDialog, ElImage, ElSpace, ElTag } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const { get: getCategory, list } = useEnum("EnumCouponCategory");
const { get: getType } = useEnum("EnumCouponType");
const { get: getStatus } = useEnum("EnumCouponStatus");

const tableColumns = [
    { label: "序号", type: "index", width: 70 },
    { label: "票券编码", prop: "coupon_code", minWidth: 120 },
    { label: "票券图标", slot: "coupon_img", minWidth: 120 },
    { label: "标题", prop: "coupon_name", minWidth: 160, },
    { label: "副标题", prop: "coupon_subname", minWidth: 160 },
    { label: "类型", prop: "coupon_type", width: 120, render: (row: any) => getType(row.coupon_type, 'label') },
    { label: "类别", prop: "coupon_category", width: 120, render: (row: any) => getCategory(row.coupon_category, 'label') },
    { label: "状态", slot: "status", width: 120 },
    { label: "优惠面值", prop: "coupon_num", width: 120, render: (row: any) => row.coupon_num + getCategory(row.coupon_category, 'unit') },
    { label: "操作", slot: "operate", width: 160 },
];

const [showCouponType] = useDialog({ default: false });
</script>

<template>
    <div class="mb-3 text-right">
        <ElButton :icon="Plus" size="large" type="primary" @click="showCouponType = true">新增优惠券</ElButton>
    </div>


    <ProTableUltra :columns="tableColumns" :fetch-url="ApiCoupon.list" footerFixed>
        <ProTableScope>
            <template #coupon_img="{row}">
                <ElImage :src="row.coupon_img" class="w-70px h-70px" />
            </template>
            <template #status="{ row }">
                <ElTag :type="getStatus(row.status, 'color')">{{ getStatus(row.status, 'label') }}</ElTag>
            </template>

            <template #operate="{ row }">
                <ElButton type="primary" link @click="router.push(`/coupon/modify/${row.id}`)">编辑</ElButton>
                <ElButton type="warning" link @click="router.push(`/coupon/rules/${row.id}`)">设置规则</ElButton>
            </template>
        </ProTableScope>
    </ProTableUltra>

    <ElDialog v-model="showCouponType" title="优惠券类型">
        <div class="flex flex-wrap">
            <ElCard v-for="item in list" :key="item.value"
                    class="w-248px h-130px text-center m-3 hover:shadow-lg cursor-pointer"
                    @click="router.push({ name: 'CouponManageCreate', query: { category: item.value } })">
                <div class="py-3">
                    <div class="text-xl font-bold mb-3">{{ item.label }}</div>
                    <div>{{ item.desc }}</div>
                </div>
            </ElCard>
        </div>
    </ElDialog>
</template>